<template>
    <a-drawer
      v-if="visible"
      placement="right"
      :closable="true"
      v-model:visible="visible"
      width="640"
      class="my-drawer"
      style="width: 640px;max-width: 100%;"
      :after-visible-change="afterVisibleChange"
    >
      <template #title>
        <a-avatar :src="channel.logo" /><span style="margin-left: 10px">{{
          `${channel.nameZh}文章配置`
        }}</span>
      </template>
      <div class="channels">
        <a-alert
          :message="auth ? '已认证' : '未认证'"
          :type="auth ? 'success' : 'error'"
          show-icon
          style="margin-bottom: 10px"
        />
        <Csdn v-if="channel.name == 'csdn'" :editMode="editMode" :channel="channel.name" :article="editMode?getArticle:{}" :config="getConfig"  @submit="submit"/>
        <JianShu v-if="channel.name == 'jianshu'" :editMode="editMode" :channel="channel.name" :article="editMode?getArticle:{}" :config="getConfig"  @submit="submit"/>
        <TouTiao v-if="channel.name == 'toutiao'" :editMode="editMode" :channel="channel.name" :article="editMode?getArticle:{}" :config="getConfig"  @submit="submit"/>
        <SegmentFault v-if="channel.name == 'segmentfault'" :editMode="editMode" :channel="channel.name" :article="editMode?getArticle:{}" :config="getConfig"  @submit="submit"/>
        <JueJin v-if="channel.name == 'juejin'" :editMode="editMode" :channel="channel.name" :article="editMode?getArticle:{}" :config="getConfig"  @submit="submit"/>
        <Cnblogs v-if="channel.name == 'cnblogs'" :editMode="editMode" :channel="channel.name" :article="editMode?getArticle:{}" :config="getConfig"  @submit="submit"/>
        <ZhiHu v-if="channel.name == 'zhihu'" :editMode="editMode" :channel="channel.name" :article="editMode?getArticle:{}" :config="getConfig"  @submit="submit"/>
        <Spring4All v-if="channel.name == 'spring4all'" :editMode="editMode" :channel="channel.name" :article="editMode?getArticle:{}" :config="getConfig"  @submit="submit"/>
        <Imooc v-if="channel.name == 'imooc'" :editMode="editMode" :channel="channel.name" :article="editMode?getArticle:{}" :config="getConfig"  @submit="submit"/>
        <Weibo v-if="channel.name == 'weibo'" :editMode="editMode" :channel="channel.name" :article="editMode?getArticle:{}" :config="getConfig"  @submit="submit"/>
        <Oschina v-if="channel.name == 'oschina'" :editMode="editMode" :channel="channel.name" :article="editMode?getArticle:{}" :config="getConfig"  @submit="submit"/>
      </div>
    </a-drawer>
</template>
<script>
import Csdn from "./Csdn";
import JianShu from "./JianShu";
import TouTiao from "./TouTiao";
import SegmentFault from "./SegmentFault";
import JueJin from "./JueJin";
import Cnblogs from "./Cnblogs";
import ZhiHu from "./ZhiHu";
import Spring4All from "./Spring4All";
import Imooc from "./Imooc";
import Weibo from "./Weibo";
import Oschina from "./Oschina";
export default {
  name: "Config",
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    editMode: {
      type: Boolean,
      default: false,
    },
    channel: Object,
  },
  components: {
    Csdn,
    JianShu,
    TouTiao,
    SegmentFault,
    JueJin,
    Cnblogs,
    ZhiHu,
    Spring4All,
    Imooc,
    Weibo,
    Oschina
  },
  computed: {
    auth() {
      const configs = this.$store.state.channel.configs;
      console.log(configs[this.channel.name].cookieStatus);
      return configs[this.channel.name].cookieStatus;
    },
    getArticle(){
      return this.$store.getters.getArticle(this.$store.state.channel.id);
    },
    getConfig(){
      return this.$store.getters.getConfig(this.channel.name);
    }
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    afterVisibleChange(val) {
      console.log("visible", val);
    },
    showDrawer() {
      this.visible = true;
    },
    submit(form){
      console.log(form)
      if(this.editMode){
        this.$store.commit('setUserConfig',form)
      }else{
        console.log(form.config)
        this.$store.commit('setDescConfig',form)
      }
      this.$message.success(this.channel.nameZh + "配置成功");
      this.visible=false
    }
  },
  watch: {
    open() {
      this.visible = true;
    },
  },
};
</script>
<style lang="stylus" scoped>
.my-drewer
    
  .ant-drawer-wrapper-body
  overflow hidden
  .channels 
      padding: 0 10px 10px 10px;

</style>